<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>应用中心</title>
    <link rel="stylesheet" href="{__CSS__}/element_ui.css"/>
    <link rel="stylesheet" href="{__CSS__}/style.css"/>
    <script src="{__JS__}/vue2.js"></script>
    <script src="{__JS__}/element_ui.js"></script>
    <script src="{__JS__}/axios.min.js"></script>
    <script src="{__JS__}/request.js"></script>
    <style>
        .plugin-item {
            width: 100%;
            height: 170px;
            padding: 10px;
            box-sizing: border-box;
        }

        .plugin-box {
            width: 100%;
            height: 100%;
            display: flex;
            cursor: pointer;
            background: #fff;
            border-radius: 8px;
            border: 1px solid #e8eaec;
            transition: all 0.25s ease;
            position: relative;
            overflow: hidden;
        }

        .plugin-box:hover {
            border-color: #409eff;
            box-shadow: 0 6px 16px rgba(64, 158, 255, 0.12);
            transform: translateY(-1px);
        }

        .plugin-icon {
            width: 70px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            position: relative;
        }


        .plugin-icon i {
            font-size: 32px;
            color: #409eff;
        }

        .plugin-content {
            flex: 1;
            padding: 16px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .plugin-title {
            font-size: 16px;
            font-weight: 600;
            color: #303133;
            margin-bottom: 6px;
            line-height: 1.3;
        }

        .plugin-desc {
            font-size: 13px;
            color: #606266;
            line-height: 1.4;
            height: 54px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            margin-bottom: 30px;
        }

        .plugin-status {
            width: 90px;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            border-left: 1px solid #ebeef5;
            text-align: center;
            padding: 10px 5px;
            box-sizing: border-box;
        }

        .plugin-status .el-dropdown {
            width: 100%;
            margin-top: auto;
        }

        .plugin-status .el-button {
            width: 100%;
            padding: 4px 8px;
            font-size: 11px;
            border-radius: 3px;
        }

        .dropdown-menu-item {
            font-size: 12px;
            padding: 4px 12px;
            line-height: 1.2;
        }

        .plugin-tool .el-button:hover {
            border-color: #409eff;
            color: #409eff;
            background-color: #ecf5ff;
            transform: none;
        }


        .plugin-status .el-tag {
            border-radius: 10px;
            padding: 10px 10px;
            font-size: 11px;
            font-weight: 500;
            display: inline-block;
            line-height: 1;
            border: 1px solid;
        }

        .plugin-status .el-tag--success {
            background: #f0f9ff;
            border-color: #409eff;
            color: #409eff;
        }

        .plugin-status .el-tag--danger {
            background: #fef0f0;
            border-color: #f56c6c;
            color: #f56c6c;
        }

        .plugin-tool .el-button--primary {
            background: #409eff;
            border-color: #409eff;
        }

        .plugin-tool .el-button--primary:hover {
            background: #66b1ff;
            border-color: #66b1ff;
        }

        /* 响应式优化 */
        @media (max-width: 1200px) {
            .plugin-item {
                height: 200px;
            }

            .plugin-content {
                padding: 15px;
            }

            .plugin-desc {
                height: 50px;
            }
        }

        /* 中等屏幕响应式 */
        @media (max-width: 992px) {
            .plugin-item {
                height: 200px;
            }

            .plugin-content {
                padding: 12px;
            }

            .plugin-desc {
                height: 45px;
                font-size: 12px;
            }

            .plugin-tool .el-button {
                padding: 4px 8px;
                font-size: 11px;
                min-width: 70px;
            }

            .plugin-status {
                width: 90px;
                padding: 8px 4px;
            }

            .plugin-status .el-button {
                padding: 3px 6px;
                font-size: 10px;
            }
        }

        /* 小屏幕响应式 */
        @media (max-width: 768px) {
            .plugin-item {
                height: auto;
                min-height: 160px;
            }

            .plugin-box {
                flex-direction: column;
                height: auto;
            }

            .plugin-icon {
                width: 100%;
                height: 50px;
                border-bottom: 1px solid #e8eaec;
            }

            .plugin-content {
                padding: 10px;
                flex: 1;
            }

            .plugin-desc {
                height: 35px;
                font-size: 11px;
                margin-bottom: 8px;
            }

            .plugin-tool {
                justify-content: center;
            }

            .plugin-tool .el-button {
                padding: 3px 6px;
                font-size: 10px;
                min-width: 60px;
            }

            .plugin-status {
                width: 100%;
                height: auto;
                min-height: 60px;
                border-left: none;
                border-top: 1px solid #ebeef5;
                flex-direction: row;
                justify-content: space-between;
                padding: 8px 12px;
            }

            .plugin-status .el-tag {
                padding: 4px 8px;
                font-size: 9px;
            }

            .plugin-status .el-button {
                width: auto;
                min-width: 60px;
                padding: 3px 6px;
                font-size: 9px;
            }
        }

        /* 超小屏幕响应式 */
        @media (max-width: 576px) {
            .plugin-status .el-button {
                padding: 2px 4px;
                font-size: 8px;
                min-width: 50px;
            }

            .plugin-title {
                font-size: 13px;
            }

            .plugin-desc {
                height: 32px;
                font-size: 10px;
            }

            .dropdown-menu-item {
                font-size: 11px;
                padding: 3px 10px;
                line-height: 1.1;
            }
        }

        .pagination-box {
            margin-top: 20px;
            text-align: right;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="app-loading" v-if="pageLoading">
        <div class="app-loading__logo">
            <img src="{__IMG__}/logo.png"/>
        </div>
        <div class="app-loading__loader"></div>
        <div class="app-loading__title">{$title}</div>
    </div>
    <el-card class="box-card" v-else>
        <div slot="header" class="clearfix">
            <span>应用中心</span>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="应用列表" name="first">
                <div class="search-box">
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline" style="margin-top: 20px;">
                        <el-form-item label="插件名称">
                            <el-input v-model="searchForm.title" placeholder="" clearable size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="插件状态">
                            <el-select v-model="searchForm.status" placeholder="插件状态" size="small" clearable>
                                <el-option label="待安装" value="1"></el-option>
                                <el-option label="已安装" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSearch" size="small" icon="el-icon-search" >查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-bottom: 15px"></div>
                <el-row style="background: #f7f7f7">
                    <el-col :span="4" v-for="item in tableData" :key="item.id">
                        <div class="plugin-item">
                            <div class="plugin-box">
                                <div class="plugin-icon" style="background: #fff">
                                    <i :class="item.icon" style="font-size: 48px;color:#409eff"></i>
                                </div>
                                <div class="plugin-content">
                                    <div class="plugin-title">
                                        {{ item.title }}
                                    </div>
                                    <div class="plugin-desc">
                                        {{ item.description }}
                                    </div>
                                </div>
                                <div class="plugin-status">
                                    <div>
                                        <el-tag type="danger" v-if="item.status == 1">待安装</el-tag>
                                        <el-tag type="success" v-if="item.status == 2">已安装</el-tag>
                                    </div>
                                    <el-dropdown @command="handleCommand" trigger="click">
                                        <el-button type="default" size="small" title="更多操作">
                                            更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                                        </el-button>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item
                                                    v-if="item.status == 1"
                                                    :command="{action: 'install', item: item}"
                                                    class="dropdown-menu-item">
                                                <i class="el-icon-download"></i> 安装
                                            </el-dropdown-item>
                                            <el-dropdown-item
                                                    v-if="item.status == 1"
                                                    :command="{action: 'delete', item: item}"
                                                    class="dropdown-menu-item">
                                                <i class="el-icon-delete"></i> 删除
                                            </el-dropdown-item>
                                            <el-dropdown-item
                                                    v-if="item.status == 2"
                                                    :command="{action: 'uninstall', item: item}"
                                                    class="dropdown-menu-item">
                                                <i class="el-icon-remove"></i> 卸载
                                            </el-dropdown-item>
                                            <el-dropdown-item
                                                    :command="{action: 'pack', item: item}"
                                                    class="dropdown-menu-item">
                                                <i class="el-icon-box"></i> 打包
                                            </el-dropdown-item>
                                            <el-dropdown-item
                                                    :command="{action: 'update', item: item}"
                                                    class="dropdown-menu-item">
                                                <i class="el-icon-refresh"></i> 生成升级包
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>

                <!-- 分页 -->
                <div class="pagination-box">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="searchForm.page"
                            :page-sizes="[10, 15, 20, 50, 100]"
                            :page-size="searchForm.limit"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="创建插件" name="second">
                <el-form ref="ruleForm" :rules="rules" :model="form" label-width="80px">
                    <el-form-item label="插件标识" prop="name">
                        <el-input v-model="form.name" style="width: 500px"></el-input>
                    </el-form-item>
                    <el-form-item label="插件名称" prop="title">
                        <el-input v-model="form.title" style="width: 500px"></el-input>
                    </el-form-item>
                    <el-form-item label="插件图标" prop="icon">
                        <el-input v-model="form.icon" style="width: 500px"></el-input>
                    </el-form-item>
                    <el-form-item label="作者" prop="author">
                        <el-input v-model="form.author" style="width: 500px"></el-input>
                    </el-form-item>
                    <el-form-item label="主页" prop="home_page">
                        <el-input v-model="form.home_page" style="width: 500px"></el-input>
                    </el-form-item>
                    <el-form-item label="版本" prop="version">
                        <el-input v-model="form.version" style="width: 500px"></el-input>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input v-model="form.description" style="width: 500px" type="textarea" :rows="3"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('ruleForm')" :loading="loading">立即创建</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="安装插件" name="third">
                <el-form ref="form" :model="installForm" label-width="80px">
                    <el-form-item label="包类型">
                        <el-radio-group v-model="installForm.package_type">
                            <el-radio label="1">安装包</el-radio>
                            <el-radio label="2">升级包</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="安装包" style="width: 250px">
                        <el-upload
                                class="upload-demo"
                                action="{:url('attachment/uploadOtherFile')}"
                                :limit="1"
                                :on-success="successHandle">
                            <el-button size="small" type="default" icon="el-icon-upload">点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="install" size="small">确认安装</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </el-card>

    <el-dialog title="处理更新包" :visible.sync="updateDialog" width="900px" destroy-on-close :close-on-click-modal="false">
        {include file="/plugin/files"}
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                pageLoading: true,
                tableData: [],
                baseIndex: '/{:config("shop.backend_index")}/',
                activeName: 'first',
                searchForm: {
                    limit: 15,
                    page: 1,
                    title: '',
                    status: ''
                },
                total: 1,
                form: {
                    name: '',
                    title: '',
                    icon: '',
                    description: '',
                    author: '',
                    home_page: '',
                    version: '1.0'
                },
                // 安装表单
                installForm: {
                    name: '',
                    package_type: '1',
                    package_url: ''
                },
                // 规则
                rules: {
                    name: [
                        { required: true, message: '请输入插件标识'}
                    ],
                    title: [
                        { required: true, message: '请输入插件名称'}
                    ],
                    icon: [
                        { required: true, message: '请输入插件图标'}
                    ],
                    author: [
                        { required: true, message: '请输入插作者名称'}
                    ],
                    home_page: [
                        { required: true, message: '请输入插件主页'}
                    ],
                    version: [
                        { required: true, message: '请输入插件版本'}
                    ]
                },
                loading: false,
                updateForm: {
                    name: '',
                    files: ''
                },
                updateDialog: false, // 更新弹层
            }
        },
        mounted() {
            // 获取应用列表
            this.getAppList()
            this.pageLoading = false
        },
        methods: {
            // 处理下拉菜单命令
            handleCommand(command) {
                const { action, item } = command;
                switch (action) {
                    case 'install':
                        this.handleInstall(item);
                        break;
                    case 'delete':
                        this.handleDelete(item);
                        break;
                    case 'uninstall':
                        this.handleUnInstall(item);
                        break;
                    case 'pack':
                        this.handlePack(item);
                        break;
                    case 'update':
                        this.handleUpdate(item);
                        break;
                }
            },
            // 获取信息
            handleClick(active) {
                if (active.name == 'first') {
                    this.getAppList()
                }
            },
            // 获取应用列表
            async getAppList() {
                let res = await request.get(this.baseIndex + 'plugin/index', this.searchForm)
                this.total = res.data.total
                this.tableData = res.data.rows
            },
            // 分页修改
            pageChangeHandle(val) {
                this.searchForm.page = val
                this.getAppList()
            },
            // 分页大小变化
            handleSizeChange(val) {
                this.searchForm.limit = val
                this.getAppList()
            },
            // 当前页变化
            handleCurrentChange(val) {
                this.searchForm.page = val
                this.getAppList()
            },
            // 安装
            handleInstall(row) {
                this.$confirm('您即将安装该插件，确定继续吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await request.get(this.baseIndex + 'plugin/install', {id: row.id})
                    if (res.code == 0) {
                        this.$message.success('安装成功')
                        this.getAppList()
                    } else {
                        this.$message.error(res.msg)
                    }
                });
            },
            // 删除
            async handleDelete(row) {
                this.$confirm('删除插件则会将插件的文件也删除，请谨慎操作！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await request.get(this.baseIndex + 'plugin/del', {id: row.id})
                    if (res.code == 0) {
                        this.$message.success('删除成功')
                        this.getAppList()
                    } else {
                        this.$message.error(res.msg)
                    }
                });
            },
            // 卸载
            handleUnInstall(row) {
                this.$confirm('即将卸载该程序，卸载后该功能将不可使用，确定继续吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await request.get(this.baseIndex + 'plugin/uninstall', {id: row.id})
                    if (res.code == 0) {
                        this.$message.success('卸载成功')
                        this.getAppList()
                    } else {
                        this.$message.error(res.msg)
                    }
                });
            },
            // 创建插件
            onSubmit(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        this.loading = true
                        let res = await request.post(this.baseIndex + 'plugin/create', this.form)
                        this.loading = false

                        if (res.code == 0) {
                            this.$message.success(res.msg)
                            this.getAppList()
                            setTimeout(() => {
                                window.location.reload();
                            }, 1500)
                        } else {
                            this.$message.error(res.msg)
                        }
                    }
                });
            },
            // 搜索
            onSearch() {
                this.searchForm.page = 1
                this.getAppList()
            },
            // 打包应用
            handlePack(row) {
                this.$confirm('确定打包该应用吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await request.get(this.baseIndex + 'plugin/pack', {name: row.name})
                    if (res.code == 0) {
                        this.$message.success('打包成功')
                        setTimeout(() => {
                            this.$confirm('您需要下载该打包文件吗?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                window.location.href = '/' + row.name + '.zip'
                            });
                        }, 1500)
                    } else {
                        this.$message.error(res.msg)
                    }
                });
            },
            // 制作升级包
            handleUpdate(row) {
                this.updateForm.name = row.name
                this.updateDialog = true
            },
            // 提交更新包信息
            async doUpdateSubmit() {
                let res = await request.post(this.baseIndex + 'plugin/update', this.updateForm)
                if (res.code == 0) {
                    this.$message.success(res.msg)
                    this.updateDialog = false
                    setTimeout(() => {
                        this.$confirm('您需要下载该更新包文件吗?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            window.location.href = '/' + this.updateForm.name + '_update_' + this.updateForm.version + '.zip'
                        });
                    }, 1500)
                } else {
                    this.$message.error(res.msg)
                }
            },
            // 上传
            successHandle(file) {
                this.installForm.package_url = file.data.url
                this.installForm.name = file.data.name
            },
            // 安装
            async install() {
                let res = await request.post(this.baseIndex + 'plugin/import', this.installForm)
                if (res.code == 0) {
                    this.$message.success(res.msg)
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500)
                } else {
                    this.$message.error(res.msg)
                }
            }
        }
    });
</script>
</body>
</html>